{extend name="common@base" /}
{block name="content"}
<section class="content">
  <form class="form" method="post">
    <div id="password" class="box box-primary">
      <div class="box-body">
        <div class="row">
          <div class="col-xs-12 col-sm-6">
            <div class="form-group">
              <label>请输入新密码（密码需要至少8位，并且是字母+数字组合）</label>
              <input name="form[ password]" type="text"
                     class="form-control" v-model="password" required>

              <span class="label label-danger" v-show="tip1==0">密码强度：弱</span>
              <span class="label label-warning" v-show="tip1==1">密码强度：中</span>
              <span class="label label-success" v-show="tip1==2">密码强度：强</span>
            </div>
            <div class="form-group">
              <label>请再次输入密码以便确认</label>
              <input name="form[password2]" type="text" class="form-control" v-model="password2" required>
              <span class="label label-danger">{{tip2}}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="box-footer">
        <button type="submit" class="btn btn-primary js-ajax-submit" v-bind:disabled="dis">保存</button>
        <a href="javascript:history.back(-1)" class="btn btn-default ">返回</a>
      </div>
    </div>
  </form>
</section>
{/block}
{block name="page_script"}
<script>
  require(["vue"], function (Vue) {
    var obj = new Vue({
      el: "#password",
      data: {
        password: "",
        password2: "",
        tip1: -1,
        tip2: "",
        dis: true
      },
      created: function () {

      },
      watch: {
        password: function () {
          var password = this.password;
          var regex1 = new RegExp('(?=.*[0-9])(?=.*[a-zA-Z]).{4,7}');
          var regex2 = new RegExp('(?=.*[0-9])(?=.*[a-zA-Z]).{8,30}');
          var r1 = regex1.test(password);
          var r2 = regex2.test(password);
          if(password.length==0){
            this.tip1=-1;
            return;
          }
          this.tip1=0;
          if (r1) this.tip1 = 1;
          if (r2) this.tip1 = 2;
        },
        password2: function () {
          var password = this.password;
          var password2 = this.password2;
          if (password == password2) {
            this.dis = false;
            this.tip = ""
          } else {
            this.dis = true;
            this.tip2 = "两次输入的密码不同";
          }
        }
      },
      methods: {},
    });
  })

  require(["layer_config", "ajaxForm"], function (layer) {
  });
</script>
{/block}